// 通过vue.config.js来配置webpack
// 为开发模式和发布模式指定不同的打包入口
module.exports = {
  chainWebpack: config => {
    // 发布模式
    config.when(process.env.NODE_ENV === 'production', config => {
      // entry找到默认的打包入口，调用clear则是删除默认的打包入口
      // add添加新的打包入口
      config.entry('app').clear().add('./src/main-prod.js')

      /* 默认情况下，依赖项的所有第三方包都会被打包到合并到同一个文件中js/chunk-vendors.******.js文件中，导致该js文件过大;
      那么我们可以通过externals排除这些包，使它们不被打包到js/chunk-vendors.******.js文件中,同时需要在index.html中配合加载外部CDN资源(版本要一致)
      设置好排除之后，为了使我们可以使用vue，axios等内容，我们需要加载外部CDN的形式解决引入依赖项。
      打开开发入口文件main-prod.js,删除掉默认的引入代码 */
      config.set('externals', {
        vue: 'Vue',
        'vue-router': 'VueRouter',
        axios: 'axios',
        lodash: '_',
        echarts: 'echarts',
        nprogress: 'NProgress',
        'vue-quill-editor': 'VueQuillEditor'
      })

      /* 
      开发环境的首页和发布环境的首页展示内容的形式有所不同
      如开发环境中使用的是import加载第三方包，而发布环境则是使用CDN，那么首页也需根据环境不同来进行不同的实现
      我们可以通过插件的方式来定制首页内容, 添加isProd自定义属性根据其值来在 index.html中按需加载相关资源 */
      config.plugin('html').tap(args => {
        args[0].isProd = true
        return args
      })
    })

    // 开发模式
    config.when(process.env.NODE_ENV === 'development', config => {
      config.entry('app').clear().add('./src/main-dev.js')

      config.plugin('html').tap(args => {
        args[0].isProd = false
        return args
      })
    })
  }
}
